<template>
  <div>
    <canvas canvas-id="lineCanvas" style="width: 100%; height: 300px;margin-top: 20px"></canvas>
  </div>
</template>

<script lang="ts">
  import { Vue, Component } from 'vue-property-decorator';
  import wxCharts from '@/utils/charts.js';
  import { UserInfo } from '@/types';
  import { ActivityAbstract } from '@/types/activity';
  @Component({
    components: {},
  })
  export default class extends Vue {
    seasonData: number[] = [];
    userInfo: UserInfo;
    public getChartsData(id: string) {
      return wx.cloud
        .callFunction({
          name: 'get_user_info',
        })
        .then(({ result }) => {
          console.log('[云函数] [get_user_info] 调用成功: ', result);
          if (Array.isArray(result) && result.length > 0) {
            this.userInfo = result.find((user) => {
              return user.id == id;
            });
            this.seasonData = this.userInfo.activities
              .filter((act: ActivityAbstract) => {
                return act.seasonId === this.$$store.season._id;
              })
              .map((act: ActivityAbstract) => {
                return act.score;
              });
          }
        });
    }

    async onLoad(query: any) {
      let windowWidth = 320;
      try {
        let res = wx.getSystemInfoSync();
        windowWidth = res.windowWidth;
      } catch (e) {
        // do something when get system info failed
      }
      let totalScore = 0;
      await this.getChartsData(query.userId);
      new wxCharts({
        canvasId: 'lineCanvas',
        type: 'line',
        categories: Object.keys(this.seasonData),
        series: [
          {
            name: this.userInfo.nickName,
            data: this.seasonData.map((score: number) => {
              return (totalScore += score);
            }),
          },
        ],
        // yAxis: {
        //   title: '成交金额 (万元)',
        //   format: function(val: number) {
        //     return val.toFixed(2);
        //   },
        //   min: 0,
        // },
        width: windowWidth,
        height: 300,
      });
    }
  }
</script>

<style></style>
